<template>
  <div>
    <div class="mainCon">
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form
          :inline="true"
          :model="filterField"
          ref="searchConditions"
          class="clearfix"
        >
          <el-col :lg="8" :xl="6">
            <el-form-item label="时间" class="row-padding-bottom">
              <el-date-picker
                v-model="time"
                @change="changeDate"
                :clearable="clearable"
                :type="type == 'month' ? 'month' : 'year'"
                value-format="yyyy-MM"
                :placeholder="type == 'month' ? '选择月' : '选择年'"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :lg="8" :xl="6">
            <el-form-item label="参建单位" class="row-padding-bottom">
              <el-select
                v-model="filterField.projectCompanyId"
                clearable
                filterable
                placeholder="请选择"
                @change="changeCompany"
                :disabled="isFB"
              >
                <el-option
                  v-for="(item, index) of companyList"
                  :key="index"
                  :label="item.name"
                  :value="item.code"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <template v-if="advanced">
            <el-col :lg="8" :xl="6">
              <el-form-item label="班组" class="row-padding-bottom">
                <el-select
                  v-model="filterField.groupId"
                  clearable
                  filterable
                  placeholder="请先选择参建单位"
                >
                  <el-option
                    v-for="(item, index) of groupIdOptions"
                    :key="index"
                    :label="item.name"
                    :value="item.code"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="工人" class="row-padding-bottom name">
                <el-input
                  placeholder="请输入姓名或身份证号"
                  clearable
                  v-model="filterField.keyword"
                  @blur="filterField.keyword = changeValue($event)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-form-item label="考勤卡号" class="row-padding-bottom">
                <el-input
                  v-model="filterField.attNo"
                  placeholder="请输入考勤卡号"
                  clearable
                  @blur="filterField.attNo = changeValue($event)"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :lg="8" :xl="6" v-if="isKMUser()">
              <el-form-item label="户籍" class="row-padding-bottom">
                <el-cascader
                  ref="manageArea"
                  v-model="filterField.census"
                  :append-to-body="false"
                  :options="liveAddressOptions"
                  @change="getAreaId"
                  clearable
                  filterable
                  :props="{ checkStrictly: true, emitPath: false }"
                ></el-cascader>
              </el-form-item>
            </el-col>
          </template>
          <el-col :lg="8" :xl="6">
            <el-form-item label="">
              <a
                @click="toggleAdvanced"
                style="margin-left: 40px; color: #409eff; cursor: pointer"
                class="btnColor"
              >
                {{ advanced ? '收起' : '展开' }}
                <i
                  :class="advanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'"
                ></i>
              </a>
              <el-button
                type="primary"
                icon="icon iconfont iconchazhao1"
                @click="searchList"
                class="searchBtn"
              >
                <span>搜索</span>
              </el-button>
            </el-form-item>
          </el-col>
          <div class="topRight">
            <!-- <el-form-item
              v-if="
                userType == 'PROJECT_ADMINISTRATOR' ||
                userType == 'LABOR_ADMINISTRATOR'
              "
            >
              <el-button
                class="commonBut saveBtn funComBut"
                icon="icon iconfont iconshezhi"
                @click="setRule"
                v-if="isSetting"
              >
                <span class="opetareText">考勤规则设置</span>
              </el-button>
            </el-form-item>
            <el-form-item
              v-hasBtn="[
                'projectList:export',
                'mProjectList:export',
                'csAtt:export',
                'csAttFb:export',
                'projectListSGF:export',
                'projectListJSF:export'
              ]"
            >
              <el-button
                class="commonBut saveBtn funComBut"
                icon="icon iconfont icondaochu"
                @click="exportExcel"
              >
                <span class="opetareText">导出报表</span>
              </el-button>
            </el-form-item> -->
            <!-- 项目端增加导出考勤计量表 -->
            <!-- <el-form-item
              v-show="
                (
                loginType == 'JC' || userType == 'PROJECT_ADMINISTRATOR' ||
                  userType == 'LABOR_ADMINISTRATOR') &&
                type == 'month'
              "
            >
              <el-button
                v-hasBtn="[
                  'projectList:export',
                  'mProjectList:export',
                  'csAtt:export',
                ]"
                class="commonBut saveBtn funComBut"
                icon="icon iconfont iconshezhi"
                @click="exportAtt"
                v-if="isSetting"
              >
                <span class="opetareText">导出考勤计量表</span>
              </el-button>
              <el-tooltip
                content="Top center"
                placement="top"
                effect="dark"
                v-if="isSetting"
              >
                <div slot="content">
                  在花名册查不到的人员，无法导出对应的计量表
                </div>
                <i class="icon iconfont iconhuabanfuben"></i>
              </el-tooltip>
            </el-form-item> -->
          </div>
        </el-form>
      </el-row>
      <div class="spacing"></div>
      <div
        ref="tableBox"
        :class="hiddleToolBar ? 'tableBoxCur tableBox' : 'tableBoxCur'"
      >
        <div style="margin-bottom: 24px">
          <el-button
            v-if="
              (userType == 'PROJECT_ADMINISTRATOR' ||
                userType == 'LABOR_ADMINISTRATOR') &&
              isSetting &&
              showHistory
            "
            class="commonBut saveBtn funComBut"
            icon="icon iconfont iconshezhi"
            @click="setRule"
          >
            <span class="opetareText">考勤规则设置</span>
          </el-button>
          <el-button
            v-hasBtn="[
              'projectList:export',
              'mProjectList:export',
              'csAtt:export',
              'csAttFb:export',
              'projectListSGF:export',
              'projectListJSF:export',
            ]"
            class="commonBut saveBtn funComBut"
            icon="icon iconfont icondaochu"
            @click="exportExcel"
          >
            <span class="opetareText">导出报表</span>
          </el-button>
          <!-- 项目端增加导出考勤计量表 -->
          <template
            v-if="
              (loginType == 'JC' ||
                userType == 'PROJECT_ADMINISTRATOR' ||
                userType == 'LABOR_ADMINISTRATOR') &&
              type == 'month'
            "
          >
            <el-button
              v-hasBtn="[
                'projectList:export',
                'mProjectList:export',
                'csAtt:export',
              ]"
              class="commonBut saveBtn funComBut"
              icon="icon iconfont iconshezhi"
              @click="exportAtt"
              v-if="isSetting"
            >
              <span class="opetareText">导出考勤计量表</span>
            </el-button>
            <el-tooltip
              content="Top center"
              placement="top"
              effect="dark"
              v-if="isSetting"
            >
              <div slot="content">
                在花名册查不到的人员，无法导出对应的计量表
              </div>
              <i class="icon iconfont iconhuabanfuben"></i>
            </el-tooltip>
          </template>
        </div>
        <el-table
          ref="tableBox1"
          :max-height="tableHeight"
          :data="tableList"
          :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
          highlight-current-row
          stripe
          @sort-change="sortChange"
          v-loading="loading"
          style="border: 1px solid #dfe6ec"
        >
          <el-table-column
            prop="name"
            :label="type == 'month' ? '年月' : '年'"
            align="center"
          >
            <template slot-scope="scope">
              <span v-if="type == 'month'"
                >{{ scope.row.year ? scope.row.year : '--' }}-{{
                  scope.row.month ? scope.row.month : '--'
                }}</span
              >
              <span v-else>{{ scope.row.year ? scope.row.year : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="employeeName"
            label="姓名"
            align="center"
            min-width="140"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="idcard"
            label="身份证号"
            align="center"
            :formatter="formatTd"
            width="175px"
          >
            <template slot="header" slot-scope="scope">
              <span>身份证号</span>
              <span
                class="icon iconfont iconxianshi"
                @click="changeDeseHandler"
                v-if="!isHiddenIdcard"
              ></span>
              <span
                class="icon iconfont iconyincang"
                @click="changeDeseHandler"
                v-if="isHiddenIdcard"
              ></span>
            </template>
            <template slot-scope="scope">
              <p v-if="!isHiddenIdcard">
                {{ scope.row.idcard | deseHandler(4, 4, '*') || '' }}
              </p>
              <p v-else>{{ scope.row.idcard || '--' }}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="census"
            label="户籍"
            align="center"
            v-if="isKMUser()"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="attNo"
            label="考勤卡号"
            align="center"
            min-width="100"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column prop="companyName" label="参建单位" width="230">
            <template slot-scope="scope">
              <copyText
                :tableIndex="scope.$index"
                :copyTextName="scope.row.companyName"
                :columnName="'companyName'"
              ></copyText>
            </template>
          </el-table-column>
          <el-table-column
            prop="groupName"
            label="所属班组"
            align="center"
            min-width="100"
            :formatter="formatTd"
          ></el-table-column>
          <el-table-column
            prop="attCounts"
            label="打卡次数"
            min-width="100"
            sortable="custom"
            align="center"
            :formatter="formatTd"
          >
            <template slot-scope="scope">
              <el-link type="primary" @click="showAttendanceDetail(scope.row)"
                >{{ scope.row.attCounts }}次</el-link
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="attDays"
            label="打卡天数"
            align="center"
            min-width="100"
            sortable="custom"
            :formatter="formatTd"
          >
            <template slot-scope="scope"> {{ scope.row.attDays }}天 </template>
          </el-table-column>
          <el-table-column
            label="工作时长"
            align="center"
            :formatter="formatTd"
            min-width="100"
            v-if="type == 'month'"
          >
            <template slot-scope="scope">
              {{ scope.row.workingTimeTotalByHour }}小时
            </template>
          </el-table-column>
          <!-- 表格数据为空时，页面显示 -->
          <div slot="empty" v-show="isShow">
            <emptyTable emptyText="暂无相关信息"></emptyTable>
          </div>
        </el-table>
        <!-- filterField为搜索条件 -->
        <!-- getTableList为获取子组件的数据 -->
        <Pagination
          ref="pagination"
          @getList="getTableList"
          :filterField="filterField"
          :requestUrl="requestUrl"
        ></Pagination>
      </div>
    </div>

    <!-- 考勤明细弹框 -->
    <el-dialog
      title="考勤明细"
      :visible.sync="formVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeDialog"
      custom-class="brand-dialog-min-width"
      width="900"
      :modal-append-to-body="false"
    >
      <el-row class="toolbar searchInputWidth" style="padding-bottom: 0">
        <el-form :inline="true" ref="searchConditions">
          <el-form-item label="状态" class="row-padding-bottom">
            <el-select
              v-model="drawerfilterField.inRange"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in inrangeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="方向" class="row-padding-bottom">
            <el-select
              v-model="drawerfilterField.direction"
              filterable
              placeholder="请选择"
              clearable
            >
              <el-option
                v-for="item in directionList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="icon iconfont iconchazhao1"
              @click="searchBrand"
              class="commonBtn"
            ></el-button>
          </el-form-item>
        </el-form>
      </el-row>
      <el-table
        :data="drawerTableList"
        v-loading="drawerLoading"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        stripe
        style="border: 1px solid #dfe6ec"
      >
        <!-- <el-table-column prop="punchTime" label="打卡日期" align="center" :formatter=formatTd></el-table-column> -->
        <el-table-column
          prop="punchTime"
          label="打卡时间"
          align="center"
          width="180px"
          :formatter="formatTd"
        ></el-table-column>
        <el-table-column
          prop="address"
          label="打卡地址"
          align="center"
          :formatter="formatTd"
        >
          <template slot-scope="scope">
            <copyText
              :tableIndex="scope.$index"
              :copyTextName="scope.row.address"
              :columnName="'address'"
            ></copyText>
          </template>
        </el-table-column>
        <el-table-column property="path" label="打卡图片" align="center">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.path"
              style="width: 50px; height: 50px"
              :src="scope.row.path"
              :preview-src-list="scope.row.list"
            >
            </el-image>
            <span v-else>--</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="inRange"
          label="状态"
          align="center"
          :formatter="formatTd"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.inRange == 1" class="successColor"
              >范围内</span
            >
            <span v-else class="errorColor">范围外</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="direction"
          label="方向"
          align="center"
          :formatter="formatTd"
        >
          <template slot-scope="scope">
            <!-- {{scope.row.direction =="1"?"进场":"出场"}} -->
            <span v-if="scope.row.direction == 1">进场</span>
            <span v-else-if="scope.row.direction == 0">出场</span>
            <span v-else>无方向</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="attType"
          label="打卡方式"
          align="center"
          :formatter="formatTd"
        ></el-table-column>
        <div slot="empty" v-show="drawerIsShow">
          <emptyTable emptyText="暂无相关信息"></emptyTable>
        </div>
      </el-table>
      <Pagination
        style="margin-top: 20px"
        ref="drawerPagination"
        :filterField="drawerfilterField"
        @getList="getDrawerTableList"
        :requestUrl="requestDialogUrl"
      ></Pagination>
    </el-dialog>
  </div>
</template>

<script>
//
import common from '../../kits/common'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'monitorAttendance',
  props: {
    type: {
      type: Object,
      default: '',
    },
    projectId: {
      type: Object,
      default: '',
    },
    isSetting: {
      type: Boolean,
      default: true,
    },
    isFB: {
      type: Boolean,
      default: false,
    },
    showHistory: {
      type: Boolean,
      default: false,
    },
  },
  // props: ["type","projectId"],
  data() {
    return {
      hiddleToolBar: false,
      advanced: false,
      tableHeight: null,
      // isQy:true,
      //表格数据
      tableList: [],
      requestUrl: '/api-att/cs/statis/expand/monthbypage',
      time: '',
      month: '',
      orgId: '',
      //搜索条件
      filterField: {
        projectId: 'ff8080816e90ee3b016e90ff53e30000', //项目id
        year: '', //年
        month: '', //月份
        uscc: '', //参见单位
        projectCompanyId: '',
        groupId: '', //班组
        keyword: '', //
        attNo: '',
        liveAddress: '',
        census: '',
      },
      loading: true, //考勤loading
      //   tableHeight:window.innerHeight - 200,
      orglist: [],
      isShow: false,
      //   弹窗
      formVisible: false,
      drawerfilterField: {
        projectId: 'ff8080816e90ee3b016e90ff53e30000', //项目id
        year: '', //年
        month: '', //月份
        uscc: '', //参见单位
        groupId: '', //班组
        keyword: '', //
        employeeId: '',
        direction: '',
        inRange: '',
      },
      directionList: [
        { name: '进场', id: 1 },
        { name: '出场', id: 0 },
        { name: '无方向', id: -1 },
      ],
      inrangeList: [
        { name: '范围内', id: 1 },
        { name: '范围外', id: 0 },
      ],
      requestDialogUrl: 'api-att/cs/att/expand/attlist',
      drawerIsShow: false,
      drawerLoading: true,
      drawerTableList: [],
      timeType: '',
      value: '', //下拉数据
      options: [],
      isHiddenIdcard: false, // 身份证是否显示
      clearable: false,
      companyList: [],
      userType: '',
      // oldPicList:[],
      isXm: '', //是否是项目端
      loginType: '',
    }
  },
  created() {
    if (
      this.$store.state.userType == 'PROJECT_ADMINISTRATOR' ||
      this.$store.state.userType == 'LABOR_ADMINISTRATOR'
    ) {
      this.isXm = true
    } else {
      this.isXm = false
    }
    this.$store.commit('SET_INFO', ['groupIdOptions', []])
    //人员档案页面跳转该页面传入人员姓名
    this.filterField.keyword = this.$route.query.employeeName || ''

    this.filterField.projectId = this.projectId
    this.drawerfilterField.projectId = this.projectId
    this.userType = this.$store.state.userType
    if (!this.isFB) {
      this.$nextTick(function () {
        this.$refs.pagination.getTableListData()
      })
    }

    this.loginType = window.localStorage.getItem('loginType')
    // this.$nextTick(function() {
    //   this.$refs.pagination.getTableListData();
    // });
    // this.isQy = localStorage.getItem('loginType') == "QY" || localStorage.getItem('loginType') == "XM"? true : false ;

    this.getCompanyList()

    var now = new Date()
    this.filterField.year = now.getFullYear()
    this.filterField.month = now.getMonth() + 1
    // var date = now.getDate();
    var time = this.filterField.year + '-' + this.filterField.month

    if (this.type == 'year') {
      //年的url
      this.requestUrl = '/api-att/cs/statis/expand/yearbypage'
      this.filterField.month = ''
      // this.filterField.month = "";
    } else {
      //月的url
      this.requestUrl = '/api-att/cs/statis/expand/monthbypage'
    }

    this.time = time
  },
  computed: {
    ...mapState(['groupIdOptions', 'liveAddressOptions']),
  },
  activated() {
    window.addEventListener('scroll', this.handleScroll, true)
    this.$nextTick(function () {
      this.$refs.tableBox1.doLayout()
    })
  },
  deactivated() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  beforeDestroy() {
    let that = this
    window.removeEventListener('scroll', that.handleScroll, true)
  },
  methods: {
    toggleAdvanced() {
      this.advanced = !this.advanced
    },
    ...mapActions(['getGroupList', 'getLiveAddressList']),
    handleScroll(e) {
      this.$nextTick(function () {
        if (
          this.$refs.tableBox &&
          this.$refs.tableBox.getBoundingClientRect().top < 128
        ) {
          // this.tableHeight = this.$refs.mainCon.getBoundingClientRect().height - 84
          this.tableHeight = window.innerHeight - 242

          if (document.getElementsByClassName('tableBoxCur').length) {
            document.getElementsByClassName('tableBoxCur')[0].style.height =
              null
          }
          this.hiddleToolBar = true
        } else {
          this.hiddleToolBar = false
        }
      })
    },
    getTableList(data) {
      this.tableList = data
      this.loading = false
      if (this.tableList.length < 1) {
        this.isShow = true
      }
    },
    changeDeseHandler() {
      this.isHiddenIdcard = !this.isHiddenIdcard
    },
    changeDate(time) {
      if (time) {
        this.filterField.year = time.split('-')[0]
        if (this.type == 'month') {
          this.filterField.month = time.split('-')[1]
        } else {
          this.filterField.month = ''
        }
      } else {
        this.filterField.year = ''
        this.filterField.month = ''
      }
    },
    // 搜索
    searchList() {
      this.$refs.pagination.getTableListData()
    },
    // 弹窗搜索
    searchBrand() {
      this.$refs.drawerPagination.getTableListData()
    },
    getOrglist() {
      this.axios({
        method: 'post',
        url: 'api-att/nc/attendance/expand/orgarc',
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.orglist = response.data.result
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    //打卡次数
    showAttendanceDetail(row) {
      this.drawerfilterField.employeeId = row.employeeId
      this.drawerfilterField.year = row.year
      this.drawerfilterField.month = row.month
      this.drawerfilterField.uscc = row.uscc
      this.drawerfilterField.groupId = row.groupId
      this.drawerfilterField.keyword = row.keyword
      this.drawerfilterField.projectId = row.projectId
      this.drawerfilterField.direction = ''
      this.drawerfilterField.inRange = ''

      this.formVisible = true
      this.$nextTick(function () {
        this.$refs.drawerPagination.getTableListData()
      })
    },
    getDrawerTableList(data) {
      this.drawerTableList = data
      this.list = []
      this.drawerLoading = false
      for (var i = 0; i < this.drawerTableList.length; i++) {
        this.list.push(this.drawerTableList[i].path)
      }

      // this.oldPicList = this.list;
      for (var i = 0; i < this.drawerTableList.length; i++) {
        // this.list.push(this.drawerTableList[i].path)
        var container = this.list

        var frontArr = container.slice(0, i)
        var behindArr = container.slice(i, this.drawerTableList.length)
        var list = behindArr.concat(frontArr)
        this.drawerTableList[i].list = list
      }

      if (!this.drawerTableList.lenght || this.drawerTableList.lenght < 1) {
        this.drawerIsShow = true
      }
    },
    //关闭弹窗
    closeDialog() {
      this.$refs['searchConditions'].resetFields()
      this.formVisible = false
    },
    getDialogList() {},
    exportExcel() {
      var month = ''
      if (this.type == 'year') {
        month = ''
      } else {
        month = this.filterField.month
      }

      if (this.tableList.length > 0) {
        window.location.href =
          common.commonApi +
          'api-att/cs/statis/expand/report?projectId=' +
          this.filterField.projectId +
          '&year=' +
          this.filterField.year +
          '&month=' +
          month +
          '&uscc=' +
          this.filterField.uscc +
          '&groupId=' +
          this.filterField.groupId +
          '&keyword=' +
          this.filterField.keyword +
          '&census=' +
          this.filterField.census +
          '&attNo=' +
          this.filterField.attNo +
          '&sort=' +
          this.filterField.sort +
          '&sortField=' +
          this.filterField.sortField +
          '&access_token=' +
          localStorage.getItem('access_token')
      } else {
        this.$message({
          type: 'warning',
          message: '无数据导出',
        })
      }
    },
    setRule() {
      this.$router.push({
        path: '/home/constructAttendance/constructPunchCardRuleList',
        name: 'constructPunchCardRuleList',
        query: {
          projectId: this.projectId,
        },
      })

      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/constructAttendance/qyConstructAttendanceContainer',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getCompanyList() {
      this.axios({
        method: 'post',
        // url: "api-p/projectcompany/expand/findbyprojectid",
        url: 'api-p/projectcompany/expand/findprojectcompany',
        data: {
          projectId: this.projectId,
        },
      })
        .then(
          (response) => {
            if (!response.data.hasError) {
              this.companyList = response.data.result
              if (this.isFB) {
                this.filterField.uscc = response.data.result[0].uscc
                this.filterField.projectCompanyId = response.data.result[0].code
                this.getGroupList({
                  projectId: this.projectId,
                  uscc: this.filterField.uscc,
                  projectCompanyId: this.filterField.projectCompanyId,
                })
                this.$refs.pagination.getTableListData(this.currentPage)
              }
            } else {
            }
          },
          (response) => {}
        )
        .catch((error) => {})
    },
    changeCompany() {
      this.$store.commit('SET_INFO', ['groupIdOptions', []])
      this.filterField.groupId = ''
      var projectCompanyId = this.filterField.projectCompanyId
      if (projectCompanyId) {
        const findOne = this.companyList.find(
          (v) => v.code === projectCompanyId
        )
        this.filterField.uscc = findOne.uscc
        this.getGroupList({
          projectId: this.projectId,
          uscc: this.filterField.uscc,
          projectCompanyId,
        })
      } else {
        this.filterField.uscc = ''
      }
    },
    exportAtt() {
      if (this.tableList.length > 0) {
        if (this.filterField.projectCompanyId) {
          this.exportData()
        } else {
          this.axios({
            method: 'post',
            url: 'api-e/cs/group/base/findDistinctGroup',
            data: {
              projectId: this.filterField.projectId,
            },
          })
            .then(
              (res) => {
                if (!res.data.hasError) {
                  if (res.data.result) {
                    this.$message({
                      type: 'warning',
                      message: '请先选择参建单位',
                    })
                  } else {
                    this.exportData()
                  }
                } else {
                }
              },
              (res) => {}
            )
            .catch((error) => {})
        }
      } else {
        this.$message({
          type: 'warning',
          message: '无数据导出',
        })
      }
    },
    exportData() {
      var month = ''
      if (this.type == 'year') {
        month = ''
      } else {
        month = this.filterField.month
      }
      window.location.href =
        common.commonApi +
        'api-att/cs/statis/expand/exportatt?projectId=' +
        this.filterField.projectId +
        '&year=' +
        this.filterField.year +
        '&month=' +
        month +
        '&uscc=' +
        this.filterField.uscc +
        '&groupId=' +
        this.filterField.groupId +
        '&census=' +
        this.filterField.census +
        '&keyword=' +
        this.filterField.keyword +
        '&sort=' +
        this.filterField.sort +
        '&sortField=' +
        this.filterField.sortField +
        '&access_token=' +
        localStorage.getItem('access_token')
    },
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
    let that = this
    this.$nextTick(function () {
      let tableHeightCur = this.$refs.tableBox1.$el.clientHeight
      let tableTop = this.$refs.tableBox.getBoundingClientRect().top
      if (tableHeightCur + tableTop > window.innerHeight) {
        this.tableHeight =
          this.$refs.mainCon.getBoundingClientRect().height - 86
      } else {
        document.getElementsByClassName('tableBoxCur').length &&
          (document.getElementsByClassName('tableBoxCur')[0].style.height =
            window.innerHeight - tableTop - 28 + 'px')
      }

      window.onresize = function () {
        if (!that.$refs.tableBox1) {
          return
        }
        let tableHeightCur = that.$refs.tableBox1.$el.clientHeight
        let tableTop = that.$refs.tableBox.getBoundingClientRect().top
        if (tableHeightCur + tableTop > window.innerHeight) {
          that.tableHeight =
            that.$refs.mainCon.getBoundingClientRect().height - 86
        } else {
          document.getElementsByClassName('tableBoxCur').length &&
            (document.getElementsByClassName('tableBoxCur')[0].style.height =
              window.innerHeight - tableTop - 40 + 'px')
        }
      }
    })
  },
}
</script>

<style scoped lang="less">
.container {
  .commomPaddingComtainer {
    padding-top: 24px;
  }
  .mainCon {
    top: 0;
    // padding-top: 0;
  }
}

.commomPadding {
  padding-top: 0;
  /deep/ .imgPrev {
    width: 50px;
  }
}

// .exportExcel,.setRule,.exportAtt{
//   // position: fixed;
//   // top:224px;
//   position: absolute;
//   top: -60px;
// }

// .exportExcel{
//   right:6px;
// }

// .setRule{
//   right:135px;
// }

// .exportAtt {
//     right: 290px;
// }
.topRight {
  position: absolute;
  top: -60px;
  right: 0;
}
// 媒体查询，兼容低分辨率页面样式

.iconxianshi,
.iconyincang {
  cursor: pointer;
}
@import '../../../static/css/filterArea.less';
</style>
